<template>
  <div class="week-plan">
    <div class="auunerplan">
      <div class="planweek">制定周计划</div>
      <div>
        <el-button type="danger" round>制定年度目标</el-button>
      </div>
    </div>
    <el-card class="detailweek">
      <div class="nowweek">
        <el-col :span="12">
          <span class="traing"></span>本周信息
          <span class="traing"></span>
        </el-col>
        <el-col :span="12" class="nowweek-2">
          <el-button type="primary" class="newill">
            <i class="el-icon-plus"></i>
            <span>本周训练数据</span>
          </el-button>
        </el-col>
      </div>
      <el-form ref="form" :model="form" label-width="100px" :inline="true">
        <el-col :span="8" class="firsttimes">
          <el-form-item label="当前处于">
            <el-cascader
              :options="options"
              ref="first"
              style="width:200px"
              @change="handerChangeWeek"
              clearable
              v-model="opValue"
              :show-all-levels="true"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="col-8">
          <div>
            <span class="col-time">时间</span>
            <span class="showtimes">{{opValue.length==3?opValue[2].split("&")[0]:""}}</span>
          </div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="周型">
            <el-select v-model="form.years" placeholder="请选择第几周">
              <el-option
                v-for="item in form.yearsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="训练地点">
           <el-input                                    
              placeholder="请输入"
            > </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="领队">
            <el-select v-model="form.years" placeholder="请选择领队">
              <el-option
                v-for="item in form.yearsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主教练">
            <el-select v-model="form.years" placeholder="基本周">
              <el-option
                v-for="item in form.yearsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="专项教练">
            <el-select v-model="form.years" placeholder="请选择专项教练">
              <el-option
                v-for="item in form.yearsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="队医">
            <el-select v-model="form.years" placeholder="请选择队医">
              <el-option
                v-for="item in form.yearsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="体能教练">
            <el-select v-model="form.years" placeholder="请选择体能教练">
              <el-option
                v-for="item in form.yearsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
      <el-col :span="12">
        <span class="traing"></span>本周计划
        <span class="traing"></span>
      </el-col>
      <el-col :span="12" class="nowweek-2">
        <el-select
          v-model="form.trainingProject"
          placeholder="导入历史周计划"
          clearable
          size="small"
          style="width: 160px"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-col>
      <div class="plandays">计划7天,总课次11课次，课次数31.5小时,训练量130公里,力量6小时</div>
      <div class="detailweeeks" v-if="weekList.length>0">
        <div v-for="item in weekList" :key="item.dayWeek" @click="totallist(item)">
          <img
            v-if="item.active"
            src="@/assets/image/gou.png"
          />
          <img v-else src="@/assets/image/cha.png"  />
          <div style="color:#222;font-size:12px;margin:0;text-align:center">{{item.name}}</div>
        </div>
      </div>
      <div v-else style="text-align:center;font-size:14px;color:#999;line-height:100px">无数据</div>
      <!-- 本周目标内容 -->
      <div class="targetweek" v-if="num">
        <el-row class="styleweek">
          <el-col :span="12">
            <span class="traing"></span>本周目标
            <span class="traing"></span>
          </el-col>
          <el-col :span="12" class="everyday">
            <el-button type="primary">
              <i class="el-icon-document-checked"></i>
              <span>考勤</span>
            </el-button>
          </el-col>
        </el-row>
        <el-card class="cardweek">
          <!--早上 -->
          <div class="edit">
            <div>
              <img src="@/assets/image/piture1.png" />
            </div>
            <template v-if="rowList.morning&&rowList.morning.length>0">
              <div v-for="(item,index) in rowList.morning" :key="index" class="playstime">
              <div>{{item.secondLevelName}}</div>
              <div>{{item.gapTime}}分钟</div>
              <div v-if="index==0">
                <el-button type="danger" round size="mini" @click="progressclick">查看完成进度</el-button>
              </div>
            </div>
            </template>
            <div v-else style='color:#999;text-align:center;font-size:12px;'>无数据</div>
            <div>
              <span class="el-icon-edit" @click="setweek">创建</span>
            </div>
          </div>
        </el-card>
        <el-card class="cardweek">
          <div class="edit">
            <div>
              <img src="@/assets/image/piture2.png" />
            </div>
            <template v-if="rowList.beforedawn&&rowList.beforedawn.length>0">
              <div v-for="(item,index) in rowList.beforedawn" :key="index" class="playstime">
              <div>{{item.secondLevelName}}</div>
              <div>{{item.gapTime}}分钟</div>
              <div v-if="index==0">
                <el-button type="danger" round size="mini" @click="progressclick">查看完成进度</el-button>
              </div>
            </div>
            </template>
            <div v-else style='color:#999;text-align:center;font-size:12px;'>无数据</div>
            <div>
              <span class="el-icon-edit">创建</span>
            </div>
          </div>
        </el-card>
        <el-card class="cardweek">
          <div class="edit">
            <div>
              <img src="@/assets/image/piture3.png" />
            </div>
           <template v-if="rowList.afternoon&&rowList.afternoon.length>0">
              <div v-for="(item,index) in rowList.afternoon" :key="index" class="playstime">
              <div>{{item.secondLevelName}}</div>
              <div>{{item.gapTime}}分钟</div>
              <div v-if="index==0">
                <el-button type="danger" round size="mini" @click="progressclick">查看完成进度</el-button>
              </div>
            </div>
            </template>
            <div v-else style='color:#999;text-align:center;font-size:12px;'>无数据</div>
            <div>
              <span class="el-icon-edit">创建</span>
            </div>
          </div>
        </el-card>
        <el-card class="cardweek">
          <div class="edit">
            <div>
              <img src="@/assets/image/piture4.png" />
            </div>
            <template v-if="rowList.night&&rowList.night.length>0">
              <div v-for="(item,index) in rowList.night" :key="index" class="playstime">
              <div>{{item.secondLevelName}}</div>
              <div>{{item.gapTime}}分钟</div>
              <div v-if="index==0">
                <el-button type="danger" round size="mini" @click="progressclick">查看完成进度</el-button>
              </div>
            </div>
            </template>
            <div v-else style='color:#999;text-align:center;font-size:12px;'>无数据</div>
            <div>
              <span class="el-icon-edit">创建</span>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
    <div class="eddcilick">
      <div><el-button type="danger" plain>修改</el-button></div>
      <div><el-button type="danger">保存</el-button></div>
    </div>
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="700px"
      title="计划录入"
      center
      class="esdialog"
    >
      <!-- tankuang -->
      <addEdit ref="addEdit" @getFormSon="msgSon"></addEdit>
    </el-dialog>
  </div>
</template>
<script>
import {
  annualweek,
  nowtimes,
  plansweek,
  establishweek,
  thisdayweek,
  thisdayweektarget,
} from "@/api/monitor/logininfor";
import addEdit from "./addEdit";
export default {
  name: "WeekPlan",
  components: { addEdit },
  data() {
    return {
      num: true,
      // 弹框下拉框的值
      formInline: {
        beforeMornTimer: "",
        beforeMornTrainArr: [
          {
            firstLevel: "",
            secondLevel: "",
          },
        ],
        firstLevel: "",
        secondLevel: "",        
        sr: "",
        hr: "",
      },
      statusIlls: [],
      centerDialogVisible: false,
      options: [],
      activeatd: "",
      days: "",
      week: "",
      opValue: [],
      radio: "1",
      statusOptions: [],
      trainTableData: [],
      trainTableData2: [],
      planTableData: [],
      arrdays: [],
      form: {},
      weekList: [      
        ],
      moring: [],
      beforedawn: [],
      afternoon: [],
      night: [],
      rowList:{},
    };
  },
  methods: {
    handerChangeWeek() {
      this.handerDelete();
    },
    // 接收子关闭弹框
    msgSon(data) {
      this.centerDialogVisible = true;
    },
    // 周计划方法在create里调用1 本周信息的下拉框
    createweek() {
      nowtimes()
        .then((res) => {         
          var timeMis = new Date().getTime();
          this.options = [];
          res.data.forEach((e) => {
            var arr1 = {
              label: e.name,
              value: e.id,
            };
            if (e.annualPlans && e.annualPlans.length > 0) {
              arr1.children = [];
              e.annualPlans.forEach((el) => {
                var arr2 = {
                  label: el.cycleName,
                  value: el.id,
                };
                if (el.trainingWeeks && el.trainingWeeks.length > 0) {
                  arr2.children = [];
                  el.trainingWeeks.forEach((es) => {
                    this.week = es.week;
                    arr2.children.push({
                      label: es.week + "周",
                      value: es.startTime + "~" + es.endTime + "&" + es.id,
                    });
                    if (
                      new Date(es.startTime).getTime() <= timeMis &&
                      timeMis < new Date(es.endTime).getTime()
                    ) {
                    
                      this.opValue = [
                        e.id,
                        el.id,
                        es.startTime + "~" + es.endTime + "&" + es.id,
                      ];
                      this.handerDelete();
                    }
                  });
                }
                arr1.children.push(arr2);
              });
            }
            this.options.push(arr1);
          });
        })
        .catch((res) => {});
    },
    setweek() {
      // 弹框掉接口
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addEdit.setEdit(this.days);
      });
    },
    gatetimeTest(val) {
      this.curLevel = val;
    },
    gatetime1() {},
    // 掉本周计划接口2
    handerDelete() {   
      if(this.opValue&&this.opValue.length==3){
        thisdayweek({
        weekId: this.opValue[2].split("&")[1],
      })
        .then((res) => {
          console.log(res.data,999999)
          var start = new Date(this.opValue[2].split("&")[0].split("~")[0]).getTime();
          var end = new Date(this.opValue[2].split("&")[0].split("~")[1]).getTime();
          var dayName = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
         this.weekList = res.data.map((e)=>{    
           var day = new Date(e.day).getDay();
           var time = new Date(e.day).getTime();
           var selected = (time>=start&&time<end)?true:false;
           e.active = ((e.day==day)&&selected)?true:false;
           e.name = dayName[day];
           return e;
          })
          this.totallist(this.weekList[0])
            
        })
        .catch((res) => {});
      }  
      
    },
    // 本周目标
    totallist(item) {
      thisdayweektarget({
        day:item.day,
      }).then((res) => {
          console.log(res, 8888);
          this.rowList = res.data;
         
        })
        .catch((res) => {});
    },
    progressclick(){
      this.$router.push({
        path: "/gen/watertraing",      
        // query: {         
        //   id: id.id,       
        // },
       
      }); 
    }
  },
  created() {
    console.log(new Date("2020-10-18").getDay(),"day")
    this.createweek();
    this.Plain;
    // 获取周详细信息
    
    // 弹框下拉框
    plansweek()
      .then((res) => {
        this.statusIlls = res.data;
      })
      .catch((res) => {});
  },
};
</script>

<style lang="scss" scoped>
.week-plan {
  padding: 20px;
}
.week-target-title {
  display: flex;
  flex-direction: column;
}
.step-box {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.two-form-box {
  display: flex;
  justify-content: space-between;
}
.train-title {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #fff;
  background: blue;
  height: 40px;
  letter-spacing: 5px;
}
.final-step-title {
  display: flex;
  align-items: center;
  color: #fff;
  background: blue;
  height: 40px;
  padding-left: 30px;
  letter-spacing: 5px;
  margin-bottom: 30px;
}
.train-table-box {
  margin: 20px 0;
}
.plan-button {
  display: flex;
  justify-content: flex-end;
  //  margin-bottom: 20px;
}
.create-main-box {
  border: 1px solid #dedede;
  border-radius: 4px;
  margin-bottom: 28px;
}
.create-plan-main {
  padding: 20px;
}
.title {
  height: 33px;
  line-height: 33px;
  background: #f5f5f5;
  padding: 0 10px;
  font-weight: bold;
}
.main-icon {
  display: inline-block;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
  cursor: pointer;
}
.create-header {
  margin-left: 20px;
}
.strength-box {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.strength-title {
  width: 300px;
  text-align: center;
}
.strength-to {
  width: 100px;
  text-align: center;
}
.check-radio {
  display: flex;
  justify-content: flex-end;
}
.traing {
  display: inline-block;
  width: 14px;
  height: 8px;
  background-color: #2583ff;
  margin-right: 7px;
  margin-left: 7px;
}
.col-8 {
  padding-left: 57px;
}
.col-8 .col-time {
  color: #606266;
  font-weight: 600;
  font-size: 14px;
}
.nowweek {
  margin-bottom: 60px;
}
.nowweek-2 {
  text-align: center;
}
//  周计划
.auunerplan {
  text-align: center;
  line-height: 87px;
  width: 100%;
  height: 200px;
  background-color: rgba(37, 44, 65, 1);
}
.planweek {
  color: #fff;
}
.detailweek {
  margin-top: 20px;
}
.firsttimes .el-cascader--medium {
  width: 210px;
}
.firsttimes .col-nowtime {
  color: #606266;
  font-weight: 600;
  font-size: 14px;
  padding-left: 30px;
}
.plandays {
  font-size: 14px;
  padding-left: 30px;
}
.showtimes {
  font-size: 14px;
  padding-left: 20px;
}
.detailweeeks {
  margin-top: 30px;
  display: flex;
  justify-content: flex-start;
  padding-left: 20px;
}
.detailweeeks div {
  margin-left: 20px;
}
.everyday {
  text-align: center;
}
.targetweek {
  margin-top: 30px;
}
.edit {
  display: flex;
  justify-content: space-between;
  padding: 18px;
}
.cardweek {
  margin-top: 20px;
}
.styleweek {
  margin-bottom: 20px;
}
</style>
<style>
.esdialog .el-dialog__header {
  padding: 0 !important;
  text-align: left !important;
  background-color: rgba(38, 44, 66, 1);
  color: #fff !important;
  height: 46px !important;
  line-height: 47px !important;
}
.esdialog .el-dialog__title {
  color: #fff !important;
  font-size: 14px;
  padding-left: 20px;
}
.esdialog .el-dialog__headerbtn {
  position: absolute;
  top: 13px !important;
  right: 20px;
}
.handerbutton {
  margin-top: 2px;
}
.writer .el-input__inner {
  text-align: right;
}
.playstime {
  /* width: 50px;
  height: 50px; */
  line-height: 50px;
  text-align: center;
}
.el-button--mini.is-round {
  margin-left: 2px;
}
.eddcilick{
  display: flex;
  justify-content: center;
  padding: 18px;
}
.eddcilick div{
  padding-left: 18px;
}
</style>
